<template>
    <el-form label-width="5.2%" style="margin: auto;">
        <el-form-item label="活动ID:">
            <div>{{ activity.id }}</div>
        </el-form-item>
        <el-form-item label="负责人ID:">
            <div>{{ activity.ownerId }}</div>
        </el-form-item>
        <el-form-item label="负责人姓名:">
            <div>{{ activity.ownerByDo.name }}</div>
        </el-form-item>
        <el-form-item label="活动名称:">
            <div>{{ activity.name }}</div>
        </el-form-item>
        <el-form-item label="活动开始时间:">
            <div>{{ activity.startTime }}</div>
        </el-form-item>
        <el-form-item label="活动结束时间:">
            <div>{{ activity.endTime }}</div>
        </el-form-item>
        <el-form-item label="活动预算:">
            <div>{{ activity.cost }}</div>
        </el-form-item>
        <el-form-item label="活动描述:">
            <div>{{ activity.description }}</div>
        </el-form-item>
        <el-form-item label="创建时间:">
            <div>{{ activity.createTime }}</div>
        </el-form-item>
        <el-form-item label="创建人:">
            <div>{{ activity.createByDo.name }}</div>
        </el-form-item>
        <el-form-item label="更新时间:">
            <div>{{ activity.editTime }}</div>
        </el-form-item>
        <el-form-item label="更新人:">
            <div>{{ activity.editByDo.name }}</div>
        </el-form-item>
        <el-form-item label="填写备注:" prop="noteContent" class="noteContent">
            <el-input
                v-model="activityRemark.noteContent"
                type="textarea"
                placeholder="请输入活动备注"
                :style="{ width: '20vw' }"/>
        </el-form-item>
    </el-form>

    <el-button type="primary" @click="activityRemarkSubmit">提交</el-button>
    <el-button type="primary" plain @click="goBack">返回</el-button>

    <el-form-item>
        <el-table :data="activityRemarkPageInfo.list" style="width: 100%">
            <el-table-column type="index" label="序号" width="55px"/>
            <el-table-column property="noteContent" label="备注内容"/>
            <el-table-column property="createTime" label="创建时间"/>
            <el-table-column property="createByDo.name" label="创建人"/>
            <el-table-column property="editTime" label="编辑时间"/>
            <el-table-column property="editByDo.name" label="编辑人" show-overflow-tooltip/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                    <el-button type="danger" :icon="Delete" circle @click="deleteActivityRemark(scope.row.id)"/>
                </template>
            </el-table-column>
        </el-table>
    </el-form-item>
    <el-pagination
        background
        layout="prev, pager, next, jumper, total"
        :total="activityRemarkPageInfo.total"
        :page-size="activityRemarkPageInfo.pageSize"
        @change="toPage"/>
</template>

<script setup>
//活动
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost} from "../http/httpRequest.js";
import {useRoute, useRouter} from "vue-router";
import {confirmMessage, showMessage} from "../util/message.js";
import {Delete, Edit, Message} from "@element-plus/icons-vue";

// 活动详情数据对象
// 初始化时为嵌套对象(ownerByDo/createByDo/editByDo)提供空对象默认值，避免模板渲染时出现undefined错误
let activity = ref({
    ownerByDo: {},  // 负责人信息对象，存储活动负责人的详细信息
    createByDo: {}, // 创建人信息对象，存储活动创建者的详细信息
    editByDo: {}    // 编辑人信息对象，存储最后编辑者的详细信息
});

// 活动备注数据对象，用于存储活动相关的备注信息
let activityRemark = ref({});

// 活动备注分页信息对象，包含备注的创建人和编辑人信息
let activityRemarkPageInfo = ref({
    createByDo: {}, // 创建人信息对象
    editByDo: {}    // 编辑人信息对象
});

// 路由相关变量
let router = useRouter(); // 路由实例，用于页面导航
let route = useRoute();   // 当前路由信息，用于获取路由参数
let flush = inject('flush'); // 注入的刷新函数，用于数据更新后刷新页面

// 组件生命周期钩子：挂载完成后执行
onMounted(() => {
    loadActivityDetail(),  // 加载活动详情数据
    loadActivityRemark(1)  // 加载活动备注信息，默认加载第一页
})

/**
 * 加载活动详情数据
 * 通过路由参数获取活动ID，调用API获取详情信息并处理响应
 */
const loadActivityDetail = () => {
    // 从路由参数中获取活动ID
    let activityId = useRoute().params.activityId;
    // 调用GET接口获取活动详情，使用活动ID拼接请求URL
    doGet('/api/activity/' + activityId).then(resp => {
        if (resp.data.code == 200) { // 判断接口调用是否成功
            // 接口调用成功，更新活动详情数据
            activity.value = resp.data.info
            // 处理负责人信息为空的情况，避免模板渲染错误
            if (!activity.value.ownerByDo) {
                activity.value.ownerByDo = {}; // 若为null则初始化为空对象
            }
            // 处理创建者信息为空的情况，避免模板渲染错误
            if (!activity.value.createByDo) {
                activity.value.createByDo = {}; // 若为null则初始化为空对象
            }
            // 处理编辑者信息为空的情况，避免模板渲染错误
            if (!activity.value.editByDo) {
                activity.value.editByDo = {}; // 若为null则初始化为空对象
            }
        } else {
            // 接口调用失败，显示错误信息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 提交活动备注
 * 调用API提交备注内容，并根据响应结果显示提示信息
 */
const activityRemarkSubmit = () => {
    doPost('/api/activityRemark', {
        activityId: route.params.activityId, // 活动ID，从路由参数获取
        noteContent: activityRemark.value.noteContent // 备注内容，从响应式变量获取
    }).then(resp => {
        if (resp.data.code == 200) { // 判断提交是否成功
            showMessage(resp.data.msg, 'success'); // 显示成功提示
            flush(); // 调用刷新函数，刷新页面数据
        } else {
            showMessage(resp.data.msg, 'error'); // 显示错误提示
        }
    })
}

/**
 * 加载活动备注信息
 * @param {number} current - 当前页码，用于分页加载备注数据
 */
const loadActivityRemark = current => {
    doGet('/api/activityRemark', {
        current: current, // 当前页码
        activityId: route.params.activityId // 活动ID，从路由参数获取
    }).then(resp => {
        if (resp.data.code == 200) { // 判断接口调用是否成功
            activityRemarkPageInfo.value = resp.data.info; // 更新备注分页信息
        } else {
            showMessage(resp.data.msg, 'error'); // 显示错误提示
        }
    })
}

/**
 * 分页导航函数
 * @param {number} current - 目标页码，用于切换备注的页码
 */
const toPage = current => {
    loadActivityRemark(current); // 调用加载备注函数，传入目标页码
}

/**
 * 编辑活动
 * @param {number} id - 活动ID
 * 跳转到指定ID的活动编辑页面
 */
const edit = id => {
    router.push('/dashboard/activity/remark/edit/' + id);
}

/**
 * 删除活动备注的功能函数
 * @param {string} id - 活动备注ID，用于指定要删除的备注记录
 */
const deleteActivityRemark = id => {
    // 显示删除确认对话框，'warning'类型会显示黄色警告图标
    confirmMessage('确定删除?', 'warning').then(resp => {
        // 用户确认后调用删除API，拼接活动ID到URL
        doDelete('/api/activity/remark/delete/' + id).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 显示绿色成功提示
                flush(); // 调用注入的刷新函数，重新加载活动列表
            } else {
                showMessage(resp.data.msg, 'error'); // 显示红色错误提示，内容为后端返回的错误信息
            }
        }).catch(() => {
            // 捕获API调用异常（如网络错误），此处留空表示不做额外处理
        })
    })
}

/**
 * 返回上一页
 * 使用Vue Router的back方法实现页面导航回退
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>
.el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.el-table {
    margin-top: 10px;
}

/* 表格列高度限制 */
.el-table-column {
    height: 20px !important; /* 强制设置列高度 */
    max-height: 20px !important; /* 防止内容溢出 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 溢出文本显示省略号 */
}

/* 如果上述不生效，可尝试针对单元格内容设置 */
.el-table .cell {
    height: 20px !important;
    line-height: 20px !important; /* 确保内容垂直居中 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>